<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 页面</title>
</head>
<body>

<!-- 用于显示接收到的值的容器 -->
<div id="value-container"></div>

<script>
    // 创建 WebSocket 连接
    const socket = new WebSocket("ws://172.21.29.40:7777");

    // 监听连接打开事件
    socket.addEventListener("open", (event) => {
        console.log("WebSocket 连接已打开");
    });

    // 监听收到消息事件
    socket.addEventListener("message", (event) => {
        const receivedValue = event.data;
        console.log("收到值：", receivedValue);

        // 在页面上实时显示接收到的值
        const valueContainer = document.getElementById("value-container");
        valueContainer.innerHTML = `<p>接收到的值: ${receivedValue}</p>`;
    });

    // 监听连接关闭事件
    socket.addEventListener("close", (event) => {
        console.log("WebSocket 连接已关闭");
    });

    // 监听连接错误事件
    socket.addEventListener("error", (event) => {
        console.error("WebSocket 连接错误");
    });
</script>

</body>
</html>
